<template>
  <div>
    <el-form label-position="right" size="small" label-width="80px" class="base-search-more">
       <el-row>
        <el-col :span="6">
          <el-form-item label="区域">
            <el-input style="width: 100%;" placeholder="输入区域名称" v-model="params.name" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号">
            <el-input style="width: 100%;" placeholder="请输入手机号" v-model="params.mobile" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSizeChange(10)">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="position: relative;padding: 15px; background: #fff;">
      <ul class="u-table">
        <li v-for="(item,index) in tableData.list" :key="index">
          <div class="title flex-row">
            <div @click="toIsShow(index)" class="change el-table__expand-icon" :class="{'el-table__expand-icon--expanded':isShow[index]}">
              <i class="el-icon-arrow-right"></i>
            </div>
            <span class='overtext' style="width: 150px; margin-right: 10px;">{{item.realname}}</span>
            <el-date-picker v-model='item.date' type="daterange" align="left" unlink-panels :clearable='false' :editable='false'
              :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              format="yyyy-MM-dd" value-format='yyyy-MM-dd HH:mm:ss' :picker-options="pickerOptions" />
            <el-button type="danger" style="padding: 7px 12px;margin-left: 10px;" icon="el-icon-search" @click='toGetOtherTime(item,index)'>查询</el-button>
            <el-button style="padding: 8px 14px" icon="el-icon-download" @click='exportExcel(item)'>下载数据</el-button>
          </div>
          <div style="padding: 15px;" v-show="isShow[index]">
            <el-table :data="item.waiMaiRunfastAgentbusinessList" :id="'exel'+item.id" stripe style="width: 100%">
              <el-table-column prop="name" label="区域名称" min-width="120" align="center" />
              <el-table-column prop="createtime" label="创建时间" min-width="120" align="center" />
              <el-table-column prop="mobile" label="联系方式" min-width="120" align="center" />
              <el-table-column prop="username" label="登录账号" min-width="100" align="center" />
              <el-table-column prop="rname" label="所属角色" min-width="100" align="center" />
              <el-table-column prop="totalAgentIncome" label="营业总额" min-width="100" align="center" />
              <el-table-column prop="totalAmount" label="返点收入" min-width="100" align="center" />
              <el-table-column prop="totalNum" label="订单总量" min-width="100" align="center" />
            </el-table>
          </div>
        </li>
      </ul>
      <!-- 复制 el-table v-loading  v-loading无法快速响应 所有自定义 -->
      <div class="base-directives-loading" v-show="isloadingTable">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
      <div class="base-pagination clearfix">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="newPage" :page-sizes="[10, 20, 30, 40]" background :pageSize='pageSize'
          layout="total,sizes, prev, pager, next, jumper" :total="tableData.total" />
      </div>
    </div>

  </div>

</template>

<script>
  import {getDay} from '@/utils/ptkc.js'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', [getDay(0) + ' ' + '00:00:00', getDay(0) + ' ' + '23:59:59'])
            }
          }, {
            text: '昨天',
            onClick(picker) {
              picker.$emit('pick', [getDay(-1) + ' ' + '00:00:00', getDay(0) + ' ' + '23:59:59'])
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              picker.$emit('pick', [getDay(-7) + ' ' + '00:00:00', getDay(0) + ' ' + '23:59:59'])
            }
          },{
            text: '最近一个月',
            onClick(picker) {
              picker.$emit('pick', [getDay(-30) + ' ' + '00:00:00', getDay(0) + ' ' + '23:59:59'])
            }
          }],
        },
        params: { // 查询数据
          page: 0,
          size: 10,
          mobile: '',
          name: ''
        },

        isloadingTable: false,

        isShow: [],
        tableData: {},
        pageSize: 10,
        newPage: 1
      }
    },
    methods: {
      openCheck(row) { // 打开详情页
        this.pageIndex = true
      },
      handleSizeChange(size) { // 切换条数
        this.params.size = size
        this.pageSize = size
        this.newPage = 1
        this.params.page = 0
        this.getTableList()
      },
      handleCurrentChange(page) { // 切换分页
        this.params.page = page - 1
        this.getTableList()
      },
      toIsShow(index) {
        this.$set(this.isShow, index, !this.isShow[index])
      },
      getTableList() {
        const params =  { ...this.params }
        this.isloadingTable = true
        this.$http.get('/server/cityManager/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            const row = res.data.data
            row.list.forEach((item,index)=> {
              item.date = [getDay(-30) + ' ' + '00:00:00', getDay(0) + ' ' + '23:59:59']
            })
            this.tableData = row
            this.isShow = Array(row.list).fill(null)
          }
        }).finally(() => { this.isloadingTable = false })
      },
      catptionDate(st1,st2){
        if(st1&&st2){
          return `${st1.slice(0,10)}--${st2.slice(0,10)}`
        }else {
          return ''
        }
      },
      exportExcel(item) { //下载表格
        /* generate workbook object from table */
        var wb = XLSX.utils.table_to_book(document.querySelector('#exel'+item.id))
        /* get binary string as output */
        var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        try {
          FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), `${item.realname}(${this.catptionDate(item.date[0],item.date[1])}).xlsx`)
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },
      toGetOtherTime(row,index){
        this.isloadingTable = true
        const params = {date:row.date?row.date.join(','):'',id:row.id}
        this.$http.get('/server/cityManager/selectCityManager?'+this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            const r = res.data.data
            r.date = row.date
            this.$set(this.tableData.list, index, r)
          }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    mounted() {
      this.getTableList()
    }
  }
</script>

<style scoped>
  .u-table li {
    margin-bottom: 20px;
    border: 1px solid #e2e2e2;
  }

  .u-table .title {
    height: 50px;
    background: #eff0f5;
  }

  .u-table .title .change {
    width: 60px;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
</style>
